import React, {useState} from 'react';
import EchartBase from '@component/echartBase';
import SocialValue from './socialValue';

export default (props) => {
	const [type, setType] = useState('month');
	const {ele, ywData, hourData, fhData, yearMonthData, monthData } = props;

	const changeYear = (key) => {
		return () => {
			if (type === key) return;
			setType(key);
		}
	}

	const monthDataY = yearMonthData.ydata.map(item => {
		return {
			data: item.data.map(key => key / 10000)
		}
	});
	const yearDataY = monthData.ydata.map((item, index) => {
		const color = index === 0 ? '#469BDE' : '#00d8b7';
		const name = index === 0 ? '计划发电量': '实际发电量';
		return {
			name,
			data:item.data.map(key => key / 10000),
			itemStyle: {
				color,
				barBorderRadius: [18, 18, 0, 0],
			}
		}
	})

	const data = {
		month: {
			x: yearMonthData.xdata,
			y: monthDataY
		},
		year: {
			x: monthData.xdata,
			y: yearDataY
		}
	}

	const seriesItem = {
		type: 'bar',
		barWidth: 8,
		itemStyle: {
			color: '#469BDE',
			barBorderRadius: [18, 18, 0, 0],
		}
	}

	const seriesData = data[type].y.map(item => {
		return {
			...seriesItem,
			...item
		}
	});

	let lineOption = {
		grid: {
			top: 40
		},
		title: {
			text: 'MW',
			textStyle: {
				color: 'rgba(153, 153, 153, 1)',
				fontSize: 12,
			},
			top: 10
		},
		tooltip: {
			trigger: 'axis',
		},
		xAxis: {
			data: fhData.xdata,
			axisLine: {
				lineStyle: {
					color: 'rgba(153, 153, 153, 1)',
					width: 1
				},
			},
			axisTick: {
				show: false
			},
			boundaryGap: false
		},
		yAxis: {
			type: 'value',
			axisLine: {
				lineStyle: {
					color: 'rgba(153, 153, 153, 1)',
					width: 1
				}
			},
			axisTick: {
				show: false
			},
			splitLine: {
				lineStyle: {
					type: 'dotted',
					color: '#0e314F'
				}
			}
		},
		series: [
			{
				type: 'line',   //这块要定义type类型，柱形图是bar,饼图是pie
				areaStyle: {
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [{
							offset: 0, color: '#5DFAF7' // 0% 处的颜色
						}, {
							offset: 1, color: '#38474E' // 100% 处的颜色
						}],
						global: false // 缺省为 false
					}
				},
				data: fhData.ydata[0].data,
				symbol: 'circle',
				symbolSize: 10,
				itemStyle: {
					normal: {
						color: '#5EF9F9',
						lineStyle: {
							color: '#5EF9F9',
							width: 2
						},
					},
				}
			}
		]
	}

	let electricOption = {
		grid: {
			top: 40
		},
		title: {
			text: '万kWh',
			textStyle: {
				color: 'rgba(153, 153, 153, 1)',
				fontSize: 12,
			},
			top: 10
		},
		tooltip: {
			trigger: 'axis',
		},
		xAxis: {
			type: 'category',
			data: data[type].x,
			axisLine: {
				show: false,
				lineStyle: {
					color: 'rgba(153, 153, 153, 1)'
				},
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				// interval: 0,
				rotate: -40
			},
		},
		yAxis: {
			type: 'value',
			splitLine: {
				show: false
			},
			axisLine: {
				lineStyle: {
					color: 'rgba(153, 153, 153, 1)',
					width: 1
				},
			},
			axisTick: {
				show: false
			}
		},
		series: seriesData
	}

	let electricOption1 = {
		grid: {
			top: 40
		},
		title: {
			text: '万kWh',
			textStyle: {
				color: 'rgba(153, 153, 153, 1)',
				fontSize: 12,
			},
			top: 10
		},
		tooltip: {
			trigger: 'axis',
		},
		legend: {
			textStyle: {
				color: '#fff',
			},
			data: ['计划发电量', '实际发电量', ]
		},
		xAxis: {
			type: 'category',
			data: data[type].x,
			axisLine: {
				show: false,
				lineStyle: {
					color: 'rgba(153, 153, 153, 1)'
				},
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				// interval: 0,
				rotate: -40
			},
		},
		yAxis: {
			type: 'value',
			splitLine: {
				show: false
			},
			axisLine: {
				lineStyle: {
					color: 'rgba(153, 153, 153, 1)',
					width: 1
				},
			},
			axisTick: {
				show: false
			}
		},
		series: seriesData
	}

	let devOpsOption = {
		grid: {
			top: 40
		},
		title: {
			text: 'MW',
			textStyle: {
				color: 'rgba(153, 153, 153, 1)',
				fontSize: 12,
			},
			top: 10
		},
		tooltip: {
			trigger: 'axis',
		},
		xAxis: {
			data: ywData.xdata,
			axisLine: {
				lineStyle: {
					color: 'rgba(153, 153, 153, 1)',
					width: 1
				},
			},
			axisTick: {
				show: false
			},
			boundaryGap: false
		},
		yAxis: {
			type: 'value',
			axisLine: {
				lineStyle: {
					color: 'rgba(153, 153, 153, 1)',
					width: 1
				}
			},
			axisTick: {
				show: false
			},
			splitLine: {
				show: false
				//   lineStyle: {
				//       type: 'dotted'
				//   }
			}
		},
		series: [
			{
				type: 'line',   //这块要定义type类型，柱形图是bar,饼图是pie
				smooth: 'true',
				areaStyle: {
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [{
							offset: 0, color: '#03B4EA' // 0% 处的颜色
						}, {
							offset: 1, color: '#38474E' // 100% 处的颜色
						}],
						global: false // 缺省为 false
					}
				},
				data: ywData.ydata[0].data,
				symbol: 'circle',
				symbolSize: 10,
				itemStyle: {
					normal: {
						color: '#03B4EA',
						lineStyle: {
							color: '#03B4EA',
							width: 2
						},
					},
				}
			}
		]
	}

	let equOption = {
		grid: {
			top: 40,
			bottom: 20
		},
		title: {
			text: '当日等效利用小时数(h)',
			textStyle: {
				color: 'rgba(153, 153, 153, 1)',
				fontSize: 12,
			},
			top: 10
		},
		tooltip: {
			trigger: 'axis',
		},
		xAxis: {
			type: 'category',
			axisLabel: {
				interval: 0
			},
			data: hourData.xdata,
			axisLine: {
				show: false,
				lineStyle: {
					color: 'rgba(153, 153, 153, 1)'
				},
			},
			axisTick: {
				show: false
			}
		},
		yAxis: {
			type: 'value',
			splitLine: {
				show: false
			},
			axisLine: {
				lineStyle: {
					color: 'rgba(153, 153, 153, 1)',
					width: 1
				},
			},
			axisTick: {
				show: false
			}
		},
		series: [{
			data: hourData.ydata[0].data,
			type: 'bar',
			showBackground: true,
			barWidth: 12,
			backgroundStyle: {
				color: 'rgba(220, 220, 220, 0)',
				borderColor: 'rgba(220, 220, 220, 0.6)',
				borderWidth: 0.5,
				barBorderRadius: [18, 18, 0, 0]
			},
			itemStyle: {
				color: '#00F5C1',
				barBorderRadius: [18, 18, 0, 0],
			}
		}]
	}


	return (
		<div className="base-bottom">
			<EchartBase options={lineOption} id="fuhe" title="负荷曲线" style={{
				width: '370px'
			}}/>


			<div className="electric-con">
				{
					type === 'year'
					&&
					<EchartBase options={electricOption1} id="electric" title="年/月发电量" style={{
						width: '480px'
					}}/>
				}
				{
					type === 'month'
					&&
					<EchartBase options={electricOption} id="electric" title="年/月发电量" style={{
						width: '480px'
					}}/>
				}
				<div className="echrt_btns">
					<ul>
						<li className={`on_year ${type === 'year' ? 'active' : ''}`} onClick={changeYear('year')}>年</li>
						<li className={`on_month ${type === 'month' ? 'active' : ''}`} onClick={changeYear('month')}>月</li>
					</ul>
				</div>
			</div>


			<EchartBase options={devOpsOption} id="devOps" title="运维容量走势" style={{
				width: '370px'
			}}/>
			<div>
				<EchartBase options={equOption} id="equ" title="等效利用小时数" style={{
					width: '330px',
					height: '220px'
				}}/>
				<div className="cur-equ">
					<div><span style={{color:'#fff'}}>当月等效利用小时数(h)<span> {ele.rt_eqtime_month}</span></span></div>
					<div><span style={{color:'#fff'}}>当年等效利用小时数(h)<span> {ele.rt_eqtime_year}</span></span></div>
				</div>
			</div>
			
			<SocialValue ele={ele}/>


		</div>

	)
}
